<template>
  <div class="container">
    <div class="logo">
      <img class="cover" src="../../assets/logo.png" alt="" />
      <div class="title">预约叫号系统</div>
    </div>
    <div class="login">
      <div class="input-box">
        <div class="el-input__suffix">
          <img src="../../assets/user.svg" alt="" />
        </div>
        <input v-model="user.account" class="el-input__inner" type="text" placeholder="请输入账号" />
      </div>
      <div class="input-box">
        <div class="el-input__suffix">
          <img src="../../assets/password.svg" alt="" />
        </div>
        <input v-model="user.password" class="el-input__inner" type="password" placeholder="请输入密码" />
      </div>
      <div class="code" @click="copyCode">{{ user.pcImei }}</div>

    </div>
    <div class="btn-login" @click="handleLogin">
      登录
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { useUserStore } from '@renderer/store/modules/user';
import { useRouter } from 'vue-router';
import { ElLoading, ElMessage } from 'element-plus';



onMounted(() => {
  getAddress();
});



const user = reactive({
  account: '',
  password: '',
  pcImei: ''
});
const router = useRouter();

async function handleLogin() {

  if(user.account == '') {
    ElMessage.error('请输入账号！')
    return
  }
  if(user.password == '') {
    ElMessage.error('请输入密码！')
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  console.log(user);
  const _user = useUserStore();
  const isOk = await _user.login(user);
  loading.close();
  if (isOk) {
    router.push('/');
  }
}

async function getAddress() {
  const address = await window.api.get_ip_address();
  user.pcImei = address;

}

//复制文字
function copyCode() {
  window.api.get_copy()
  ElMessage({
    message: '复制成功',
    type: 'success',
  })
}





</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .logo {
    display: flex;
    flex-direction: column;
    align-items: center;

    .cover {
      width: 100px;
      height: 100px;
    }

    .title {
      font-size: 22px;
      font-weight: bold;
    }
  }


  .login {
    margin-top: 70px;
  }

  .input-box {
    position: relative;
    width: 300px;


    .el-input__inner {

      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 2px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 50px;
      line-height: 50px;
      outline: none;
      padding: 0 30px;
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
      width: 100%;
      padding-left: 45px;
      cursor: pointer;
    }

    .el-input__suffix {
      position: absolute;
      height: 100%;
      left: 15px;
      top: 0;
      text-align: center;
      color: #c0c4cc;
      transition: all .3s;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        line-height: 40px;
      }
    }

  }

  .input-box+.input-box {
    margin-top: 15px;
  }

  .btn-login {
    width: 300px;
    height: 50px;
    background-color: rgb(32, 100, 240);
    border-radius: 5px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
  }

  .code {
    cursor: pointer;
  }
}
</style>
